/* Customize the dhx classes here. */
:root {
  --jrp-green: #14532b;
  --main-bg-color: rgb(223, 231, 222);
  --main-text-color: rgb(80,102,79);
  --form-button-primary: #306742; /* rgb(84, 104, 78);*/
  --form-button-primary-focus: rgba(0,0,0,.05);
  --icon-color: rgb(112, 118, 106);
  --button-hover: rgb(208, 216, 205);
  --background-header: #CDD4CA;
  --toolbar-background-colour: #306742; /* rgb(1,1,1,0);*/ /* #CDD4CA;*/
  --toolbar-text: white; /* #4B4E4A;*/
  --toolbar-button-text: #306742; /* rgb(80,102,79);*/ /* #4B4E4A;*/
  --toolbar-button: #306742;
  --toolbar-focus-hover: #848880;
  --toolbar-button-active: #9CA298;
  --toolbar-button-active-text: #14532b;
  --toolbar-button-active-background: white;
  --button-disabled: #aeb4ac;
  --hightlight-colour: #ff9017;
  --grid-header-colour: #e5e5e5;
  --grid-header-border-colour: #e4e4e4;
  --grid-header-border-colour: grey;
  --grid-row-colour: white;
  --grid-alternating-row-colour: rgba(248, 250, 247, 1);
  --header-text: rgb(80,102,79);
  --toolbar-icon-colour: black;
  --hover-text-colour: orange;
  --required-colour: red;
  --suitability-preferred: lightgreen;
  --suitability-suitable: gray;
  --suitability-unsuitable: orange;
}

[data-dhx-theme='jrp-default-theme'] {
  /* font */
  --dhx-font-color-primary: var(--dhx-color-gray-700);
  --dhx-font-color-secondary: var(--dhx-color-gray-500);
  --dhx-font-color-additional: var(--dhx-color-gray-500);
  --dhx-font-color-disabled: var(--dhx-color-gray-800);
  --dhx-font-color-contrast: var(--jrp-green);
  --dhx-font-weight-medium: bold;
  --dhx-color-primary-active: var(--jrp-green);
  /* end font */
  /* border */
  --dhx-border: 1px solid var(--dhx-color-gray-300);
  --dhx-border-color: var(--dhx-color-gray-300);
  /* end border */
  /* color scheme */
  --dhx-h-primary: 45;
  --dhx-s-primary: 100%;
  --dhx-l-primary: 35%;
  --dhx-h-secondary: 185;
  --dhx-s-secondary: 5%;
  --dhx-l-secondary: 50%;
  --dhx-h-danger: 31;
  --dhx-s-danger: 100%;
  --dhx-l-danger: 55%;
  --dhx-h-success: 175;
  --dhx-s-success: 60%;
  --dhx-l-success: 40%;
  --dhx-h-background: 190;
  --dhx-s-background: 100%;
  --dhx-l-background: 10%;
  /* end color scheme */
  /* theme colors */
  --dhx-background-primary: var( --main-bg-color);
  --dhx-background-secondary: #f6f6f6;
  --dhx-background-additional: rgba(0,0,0,.07);
  ;
  /* end theme colors */
  /* DHTMLX Grid service variables*/

  --dhx-s-grid-header-background: var(--grid-header-colour);
  --dhx-s-grid-selection-background: orange; /* var(--jrp-green);*/
  /* end DHTMLX Grid service variables*/
  /* DHTMLX Toolbar service variables*/
  --dhx-s-toolbar-background: #002229;
  /* end DHTMLX Toolbar service variables */
}

.custom-toggle-group .dhx_toggle {
  color: gray;
}

.custom-toggle-group .dhx_toggle--selected {
  background-color: var(--jrp-green);
  color: white;
}

#sidebar-toggle-container {
  position: relative;
  background-color: #f0f0f0;
  overflow: visible;
  width: 100%;
  height: 100%;
  border-right: 1px solid var(--dhx-border-color);
  z-index: 9998;
}

#sidebar-toggle-tab {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #ddd;
  transition: left 0.5s ease-in-out;
  z-index: 9999;
}

  #sidebar-toggle-tab i {
    font-size: 3em;
    color: #333;
  }

.has_planted {
  color: darkgreen;
  font-weight: bold;
  font-style: italic;
}

  .has_planted div.dhx_grid-cell__content {
    overflow: visible;
  }

legend.dhx_form-fieldset-legend {
  float: none;
  width: auto;
}

.seed-property {
  background-color: white;
  font-weight: normal;
}


.child-item {
  background-color: #E3EBE4;
}

  .child-item .dhx_sidebar-button--active {
    background-color: #C9D3CA;
  }

.sub-item {
  margin-left: 3px;
  margin-right: 5px;
  background-color: #F3F7F4;
}

.custom-sidebar, .custom-sidebar--popup-menu {
  --dhx-background-primary: #C4CCC5; /* Sidebar background colour */
  --dhx-background-secondary: #9EA99F; /* Active item. */
  --dhx-background-additional: #838C85; /* Hover item */

  --dhx-s-toolbar-background: red;
  --dhx-color-primary: #647565; /* selected item highlight */
  --dhx-color-primary-hover: pink; /* var(--dhx-color-gray-300);*/
  --dhx-color-primary-active: blue;
  --dhx-font-color-primary: var(--dhx-color-gray-800); /* Main font colour */
  --dhx-font-color-secondary: var(--dhx-color-gray-800); /* Icons and submenu text */
  --dhx-font-color-additional: yellow;
}


.jrp .dhx_list-item--selected {
  background-color: var(--grid-alternating-row-colour);
  font-weight: bold;
  /*box-shadow: inset 4px 0 0 0 #0288d1;*/
}



.dhx_grid-header-cell-text_content {
  padding-left: 6px;
}

.empty-cell {
  background-color: var(--main-bg-color);
}

input[type="number"] {
  text-align: right;
}

/* START remove the outer grid border */
.dhx_grid_data {
  background-color: white;
}

.dhx_grid-fixed-cols {
  background-color: white;
}

.borderlessGrid .dhx_grid-content {
  border: none !important;
}

.dhx_grid-less-height .dhx_span-row:first-child .dhx_span-cell {
  border-top: 1px solid var(--dhx-border-color) !important;
}

.grid-left-border {
  border-left: 1px solid var(--dhx-border-color) !important;
}

.grid-right-border {
  border-right: 1px solid var(--dhx-border-color) !important;
}

.grid-top-border {
  border-top: 1px solid var(--dhx-border-color) !important;
}

/* END remove the outer grid border */
.dhx_combobox-input-box {
  background-color: white !important;
}

.dialog-header-text {
  font-size: large;
  text-align: center;
  width: 100%;
}

.form-header-add-button {
  margin-top: 8px;
  margin-right: 23px;
}

.dhx_menu {
  background: white;
}

.dhx_checkbox__visual-input {
  background-color: white;
}

.dhx_list {
  background-color: white;
}

.dhx_list-item--selected {
  background-color: #f7f7f7;
  box-shadow: inset 2px 0 0 0 #0288d1
}

  .dhx_list-item--focus, .dhx_list-item--selected:hover, .dhx_list-item:hover {
    background-color: #ededed;
    transition: background-color .2s ease-out
  }

.dhx_grid-footer-cell, .dhx_grid-header-cell {
  padding: 4px 4px !important;
}

.custom-tabbar .dhx_tabbar-tab-button--active {
  background-color: var(--toolbar-background-colour);
  color: white;
}

.custom-tabbar .dhx_tabbar-header-active {
  background-color: var(--jrp-green);
}

.sowing-site-property {
  background-color: white;
}

.sowing-preferred {
  border-bottom: 3px solid var(--suitability-preferred);
  padding-top: 3px;
  background-color: white;
}
.sowing-surplus {
  background-color: var(--main-bg-color) !important;
}

.sowing-suitable {
  background-color: white;
}

.sowing-unsuitable {
  background-color: var(--dhx-color-gray-100);
}

.sowing-balance-value {
  background-color: var(--main-bg-color) !important;
  /*background-color: var(--grid-header-colour);*/
}

.sowing-species-mismatch {
  background-color: var(--dhx-color-gray-500);
}


.display-options-header {
  background-color: var(--toolbar-background-colour);
  font-weight: bold;
  font-size: larger;
  color: var(--jrp-green);
}

.info-button {
  color: var(--icon-color);
  outline-width: 0;
}
/*
.tooltip-visible[data-tooltip]:before {
  content: attr(data-tooltip);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in-out;
}*/
.mdi-information-outline {
  cursor: pointer;
  position: relative;
}

  .mdi-information-outline:hover:before {
    opacity: 1;
    visibility: visible;
  }

.faq-section {
  background-color: white;
  font-size: 16px !important;
}

  .faq-section .dhx_layout-cell-inner_html {
    background-color: white;
  }

  .faq-section .layout_header {
    font-size: 16px !important;
  }

.faq {
  padding: 10px;
  font-size: 14px;
}

.faq-question {
  font-size: 16px;
  font-weight: bold;
}

/*Slider control*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

input:checked + .slider {
  background-color: var(--toolbar-background-colour);
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


.invalid {
  color: white !important;
  background-color: red !important;
}

.warning {
  color: dimgray !important;
  background-color: darkorange !important;
}
.new {
  background-color: lightgreen;
}

.changed {
  background-color: peachpuff;
}


/*Rounded sliders*/
.slider.round {
  border-radius: 34px;
}

  .slider.round:before {
    border-radius: 50%;
  }

/*END Slider control*/


.form-header-add-button {
}

  .form-header-add-button .dhx_button {
    margin-right: 0px !important;
  }

.editable-cell {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.highlight-button {
}

  .highlight-button [data-dhx-id="save"] {
    background-color: var(--hover-text-colour) !important;
    color: white !important;
  }

.editable-cell-content {
  background-color: white !important;
  border: 4px solid var(--grid-header-colour) !important;
  width: 100%;
  height: 100%;
  padding: 2px 8px;
}

.read-only-cell {
  padding: 0px 8px;
}

.site-navigation {
  background-color: var(--jrp-green) !important;
}

.site-navigation-button [aria-pressed=true] {
  transition: 0.3s;
  color: var(--toolbar-button-active-text);
}

  .site-navigation-button [aria-pressed=true] :hover {
    transition: 0.3s;
    color: white;
  }

.condensed-nav-item:hover {
  background-color: #838c85;
  transition: background-color .2s ease-out;
}

.condensed-nav-item {
  margin-left: 6px;
}
/*
.condensed-nav-item:last-of-type {
  margin-right: 6px;
}*/

.site-navigation-button .dhx_toolbar-button:hover {
  background-color: rgba(255,255,255,.15);
  transition: background-color .2s ease-out;
  border: 1px solid var(--jrp-green);
  border-radius: 7px;
}

.site-navigation-button [aria-pressed=false] {
  border: 1px solid transparent;
  transition: 0.3s;
  color: white;
}

.site-navigation-button .dhx_toolbar-button__text {
  font-size: large;
  width: 150px;
}

.white-text .dhx_layout-cell-header__title {
  color: white;
}

.white-text .dhx_layout-cell-header--row {
  background-color: transparent;
  border-bottom: 1px solid black;
}


.cell-right-side-icon {
  float: right;
}

  .cell-right-side-icon:hover {
    color: var(--hover-text-colour) !important;
  }

.transparent-element {
  background-color: transparent !important;
}

.disabled-element {
  opacity: 0.5;
}

i.highlight {
  color: var(--hightlight-colour) !important;
}

.circle-icon-background {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: white;
}

.subtotals {
  text-align: right !important;
  font-weight: bold !important;
  background-color: #f2f2f2 !important;
}

.no-overflow {
  overflow-y: hidden !important;
}

.layout-overflow {
  overflow-y: auto;
}

.active-button .dhx_button {
  font-weight: bold;
  font-size: larger;
}

.custom-toolbar .dhx_navbar {
  flex-flow: row wrap;
  padding-top: 0px;
}

.highlight-text .dhx_input--textinput {
  color: var(--hightlight-colour) !important;
  font-weight: bold;
}


.red-text {
  color: rgb(255,0,0) !important;
  font-weight: bold !important;
}

.green-text {
  color: seagreen !important;
  font-weight: bold !important;
}

.bordered-section {
  border: 1px solid var(--grid-header-border-colour);
  margin-bottom: 7px;
}

.background-white {
  background-color: snow !important;
}

.property-name {
  font-weight: bold;
}

.list-item-header {
  font-weight: bold;
  float: left;
  clear: left;
  margin-bottom: 4px;
  font-size: larger;
}

.list-item-header-secondary-text {
  float: right;
}

.list-item-primary-text {
  font-weight: bold;
  float: left;
  clear: left;
  margin-bottom: 4px;
}

.list-item-body-text {
  float: left;
  clear: left;
}

.list-item-comment-text {
  font-style: italic;
  float: left;
  clear: left;
}


.list-item-secondary-text {
  float: right;
}

.list-item-tertiary-text {
  font-style: italic;
  clear: left;
  float: left;
}

.log-content {
  background-color: white;
  padding: 4px;
}

.dhx_grid-filter {
  background-color: white;
}


.dhx_layout {
  background-color: var(--dhx-background-primary);
}

.dhx_layout-cell {
  background-color: transparent;
}

.jrp-dhx_button {
  background-color: #969B94;
}

.jrp-dhx_button-nav {
  background-color: #969B94;
}

/*Make the badge float in the top right corner of the button*/
.badge {
  color: green;
  width: 20px;
  height: 20px;
  padding: 0px 4px;
  font-size: 14px;
  position: absolute;
  Position the badge within the relatively positioned button top: 0;
  right: 20px;
}

.layout_header {
  font-weight: 500 !important;
  font-size: 17px !important;
}

  .layout_header .dhx_layout-cell-header__title {
    color: var(--header-text);
    font-weight: 500 !important;
    font-size: 17px !important;
    overflow: visible;
  }

  .layout_header .dhx_menu-button__text {
    padding-top: 4px;
  }

  .layout_header .dhx_nav-menu-button {
    border: 1px solid var(--jrp-green);
    border-radius: 7px;
    color: var(--jrp-green);
    background-color: white;
    margin-bottom: 6px !important;
    height: 40px;
  }

.padding-left {
  padding-left: 6px;
}

.header {
  background-color: var(--background-header);
}

.even-row {
  background-color: var(--grid-alternating-row-colour);
}

  .even-row .dhx_span-cell {
    background-color: var(--grid-alternating-row-colour);
  }

  .even-row .dhx_tree-cell {
    background-color: var(--grid-alternating-row-colour);
  }

.odd-row {
  background-color: var(--grid-row-colour);
}

  .odd-row .dhx_span-cell {
    background-color: var(--grid-row-colour);
  }

  .odd-row .dhx_tree-cell {
    background-color: var(--grid-row-colour);
  }

.hover-link {
  transition: 0.3s;
}

  .hover-link:hover {
    color: var(--hover-text-colour) !important;
  }

.centered {
  margin-left: auto;
  margin-right: auto;
}

.read-only {
  font-style: italic;
  background-color: rgba(247, 247, 247, .6);
}

  .read-only .dhx_grid-cell__content {
    padding-right: 4px;
  }


.archived-item {
  background-color: silver;
  font-style: italic;
}

.centered-checkbox {
  margin: 6px;
}

html, body {
  color: var( --main-text-color);
  height: 100%;
  overflow: auto;
}

a {
  color: var( --main-text-color);
  font-weight: bold;
  margin-top: 20px;
}

.layout-div {
  padding: 5px;
}

.form-tooltip {
  position: absolute;
  background-color: black;
  color: white;
  padding: 5px;
  font-size: 14px;
  z-index: 999;
}

.tooltip {
  position: relative;
  display: inline-block;
}

  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--toolbar-background-colour);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    Position the tooltip position: absolute;
    z-index: 1;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
  }


.red {
  color: red !important;
}

.bold {
  font-weight: bold !important;
}

.hover-hand {
  cursor: pointer;
}

.default-popup {
  border: 1px solid var(--jrp-green);
  border-radius: 17px;
}

  .default-popup .dhx_window {
    border-radius: 17px;
  }

  .default-popup .dhx_window-header .dhx_toolbar {
    border-radius: 15px 15px 0px 0px;
    background-color: var(--toolbar-background-colour);
    color: white;
    font-weight: bold;
    font-size: larger;
  }

  .default-popup [aria-label="tab-content-header"] .dhx_toolbar__item {
    padding-bottom: 20px;
  }

  .default-popup .dhx_toolbar__item {
    padding-left: 2px;
  }

.page-content-layout {
}

  .page-content-layout .dhx_navbar .dhx_navbar--horizontal {
    vertical-align: central;
  }

  .page-content-layout .dhx_toolbar__item .dhx_button {
    margin: 0px;
  }

.dhx_button--view_flat.dhx_button--color_primary {
  border: 1px solid var(--jrp-green);
  border-radius: 7px;
  background-color: white;
  outline-width: 0
}


  .dhx_button--view_flat.dhx_button--color_primary.dhx_button--active, .dhx_button--view_flat.dhx_button--color_primary:focus, .dhx_button--view_flat.dhx_button--color_primary:hover {
    background-color: var(--form-button-primary-focus);
  }

  .dhx_button--view_flat.dhx_button--color_primary.dhx_button--disabled, .dhx_button--view_flat.dhx_button--color_primary:disabled {
    background-color: var(--button-disabled);
  }

.dhx_button--view_link.dhx_button--color_primary {
  color: var(--icon-color);
  outline-width: 0
}

  .dhx_button--view_link.dhx_button--color_primary:focus, .dhx_button--view_link.dhx_button--color_primary:hover {
    background-color: var(--button-hover);
  }

  .dhx_button--view_link.dhx_button--color_primary.dhx_button--active, .dhx_button--view_link.dhx_button--color_primary:active {
    background-color: var(--toolbar-button-active-background);
  }


.dhx_form-group--required:not(.dhx_form-group--label_sr) .dhx_label:not(.dhx_label--with-help):after {
  content: "*";
  display: inline-block;
  padding-left: 4px;
  color: var(--required-colour);
}

.dhx_form-group--required:not(.dhx_form-group--label_sr) .dhx_label__holder:after {
  content: "*";
  display: inline-block;
  padding-left: 4px;
  color: var(--hover-text-colour);
}

.dhx_label-help {
  color: var(--icon-color);
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer
}

.dhx_checkbox__input:checked + .dhx_checkbox__visual-input {
  background-color: var(--icon-color);
  background-position: 50%;
  background-size: cover;
  border-color: rgb(112, 118, 106);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIxIDdMOSAxOWwtNS41LTUuNSAxLjQxLTEuNDFMOSAxNi4xNyAxOS41OSA1LjU5IDIxIDd6Ii8+PC9zdmc+);
  transition: background-color .2s ease-out
}

.dhx_radiobutton__input:checked + .dhx_radiobutton__visual-input {
  background-color: var(--main-text-color);
  border-color: var(--main-text-color);
}

.dhx_layout {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  background-color: var(--main-bg-color);
}

.dhx_layout-cell-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #e4e4e4;
  padding: 8px 4px;
  background-color: var(--main-bg-color);
}
/*
.dhx_layout-cell-header__title {
  margin: 0;
  font-size: large;
  line-height: 25px;
  font-weight: bold;
  color: var(--main-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  transition: color .2s ease-in
}
*/



.dhx_toolbar {
  background-color: var(--main-bg-color);
}



.dhx_toolbar-button--active, .dhx_toolbar-button:active {
  background-color: var(--toolbar-button-active-background);
  transition: background-color .2s ease-out;
  border: 1px solid var(--jrp-green);
  border-radius: 7px;
}



.dhx_tabbar-tab-button {
  border: 1px solid var(--main-text-color);
  border-radius: 4px 4px 0px 0px;
  color: var(--main-text-color);
  background-color: var(--grid-header-colour);
}

  .dhx_tabbar-tab-button:active, .dhx_tabbar-tab-button:hover, .dhx_tabbar-tab-button:hover:active {
    background-color: white;
    color: var(--main-text-color);
    transition: background-color .2s ease-out
  }

  .dhx_tabbar-tab-button:focus-visible {
    outline: 1px dashed var(--jrp-green);
    outline-offset: -1px
  }


.dhx_window .dhx_cell_content, .dhx_window .dhx_toolbar {
  background-color: var(--main-bg-color);
}


.dhx_pagination .dhx_toolbar {
  background-color: var(--main-bg-color);
  height: 44px !important;
}

.transparent-element .dhx_input {
  background-color: transparent !important;
  box-shadow: none !important;
}

.flexible-element {
  flex: 1 1 auto !important;
}

.word-wrap .dhx_label {
  white-space: normal !important;
}

.word-wrap {
  white-space: normal !important;
}

.adjust-height .site-navigation {
  height: 75px !important;
}

.hidden-button {
  width: 100%;
  height: 105px;
  cursor: pointer;
}

.header-row {
  padding-top: 3px;
}

.title {
  font-weight: bold;
  font-size: x-large;
  text-align: left;
  vertical-align: bottom;
  color: var(--jrp-green);
}

.account-button {
  color: var(--jrp-green);
}

  .account-button .dhx_toolbar-button__icon {
    color: var(--jrp-green);
  }

.dhx_button .main-toolbar-button {
  border-radius: 2px;
}

.link-div {
  font-weight: bold;
  cursor: pointer;
}

.header-text-spacer {
  height: 25px;
}

.circle {
  border-radius: 50%;
  background-color: white;
  border: 1px solid var(--jrp-green);
  padding-top: 5px;
  color: var(--jrp-green);
  text-align: center;
  width: 30px;
  height: 30px;
}

.remove-border .dhx_widget--bordered {
  border: 0px !important;
}

.adjust-to-top-label-margin .dhx_form-group {
  margin-top: 25px !important;
}

.adjust-to-top-label-margin .dhx_button {
  margin-top: 26px !important;
}

.italic {
  font-style: italic !important;
}